/* eslint no-unused-vars:0 */
import React from 'react';
import './index.less';
import {
    Card,
    Form,
    Input,
    Button,
    message,
    Icon,
    Checkbox,
    Radio,
    InputNumber,
    Select,
    Switch,
    DatePicker,
    Upload
} from 'antd';
import moment from 'moment';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TextArea = Input.TextArea;

class Rigister extends React.Component {
    state = {};
    getBase64 = (img, callback) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    };

    handleChange = (info) => {
        if (info.file.status === 'unloading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            this.getBase64(info.file.originFileObj, (imageUrl) =>
                this.setState({
                    userImg: imageUrl,
                    loading: false
                })
            );
        }
    };

    //获取值
    handleSubmit = () => {
        let userInfo = this.props.form.getFieldsValue();
        message.success(`${userInfo.userId}恭喜你注册成功`);
    };

    render() {
        const { getFieldDecorator } = this.props.form; //form是个对象
        //响应式布局
        const formItemLayout = {
            labelCol: {
                xs: 24,
                sm: 4
            },
            wrapperCol: {
                xs: 24,
                sm: 12
            }
        };
        const offsetLayout = {
            wrapperCol: {
                xs: 24,
                sm: {
                    span: 12,
                    offset: 4
                }
            }
        };
        return (
            <Card title="注册表单">
                <Form layout="horizontal">
                    <FormItem label="用户名 " {...formItemLayout}>
                        {getFieldDecorator('userId', {
                            initialValue: '',
                            rules: [
                                {
                                    required: true,
                                    message: '用户名不能为空'
                                }
                            ]
                        })(<Input placeholder="请输入用户名" />)}
                    </FormItem>
                    <FormItem label="密码" {...formItemLayout}>
                        {getFieldDecorator('userpwd', {
                            initialValue: '',
                            rules: [
                                {
                                    required: true
                                }
                            ]
                        })(<Input type="password" placeholder="请输入密码" />)}
                    </FormItem>
                    <FormItem label="性别" {...formItemLayout}>
                        {getFieldDecorator('sex', {
                            initialValue: '1'
                        })(
                            <RadioGroup>
                                <Radio value="1">男</Radio>
                                <Radio value="2">女</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem label="年龄" {...formItemLayout}>
                        {getFieldDecorator('age', {
                            initialValue: '18'
                        })(<InputNumber />)}
                    </FormItem>
                    <FormItem label="当前状态" {...formItemLayout}>
                        {getFieldDecorator('state', {
                            initialValue: '1'
                        })(
                            <Select>
                                <Option value="1">啊啊啊</Option>
                                <Option value="2">啊啊啊啊</Option>
                                <Option value="3">啊啊啊啊啊</Option>
                                <Option value="4">啊啊啊啊啊啊</Option>
                                <Option value="5">啊啊啊啊啊啊啊</Option>
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label="爱好" {...formItemLayout}>
                        {getFieldDecorator('interest', {
                            initialValue: [] //多选为数组
                        })(
                            <Select mode="multiple">
                                <Option value="1">阅读</Option>
                                <Option value="2">绘画</Option>
                                <Option value="3">运动</Option>
                                <Option value="4">棋牌</Option>
                                <Option value="5">烘焙</Option>
                                <Option value="5">旅行</Option>
                                <Option value="5">宠物</Option>
                                <Option value="5">骑行</Option>
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label="是否已婚" {...formItemLayout}>
                        {getFieldDecorator('ifMarried', {
                            initialValue: true,
                            valuePropName: 'checked'
                        })(<Switch />)}
                    </FormItem>
                    <FormItem label="生日" {...formItemLayout}>
                        {getFieldDecorator('birthday', {
                            initialValue: moment('2019-03-28')
                        })(<DatePicker showTime format="YYYY-MM-DD" />)}
                    </FormItem>
                    <FormItem label="联系地址" {...formItemLayout}>
                        {getFieldDecorator('Address', {
                            initialValue: ''
                        })(
                            <TextArea
                                autosize={{
                                    minRows: 4,
                                    maxRows: 6
                                }}
                            />
                        )}
                    </FormItem>
                    <FormItem label="头像" {...formItemLayout}>
                        {getFieldDecorator('userImg', {
                            initialValue: ''
                        })(
                            <Upload
                                listType="picture-card"
                                showUploadList={false}
                                onChange={this.handleChange}>
                                {this.state.userImg ? (
                                    <img src={this.state.userImg} />
                                ) : (
                                    <Icon type="plus" />
                                )}
                            </Upload>
                        )}
                    </FormItem>
                    <FormItem {...offsetLayout}>
                        {getFieldDecorator('userImg')(
                            <Checkbox>
                                我已阅读<a href="#">用户协议</a>
                            </Checkbox>
                        )}
                    </FormItem>
                    <FormItem {...offsetLayout}>
                        <Button type="primary" onClick={this.handleSubmit}>
                            注册
                        </Button>
                    </FormItem>
                </Form>
            </Card>
        );
    }
}
export default Form.create()(Rigister); //this.props.form才可以取到
